安裝相關程式 → 下載範本 → 列出功能清單 → 逐一實作
1. 安裝相關程式
VSCode:編輯器
Node.js
2. 下載範本
- 下載範本並解壓縮:下載連結
- 開啟 VSCode → File → Open Folder → 選擇範本所在的資料夾
(首次開啟時,會跳出安裝插件提示)
- 開啟 VSCode → Terminal → New Terminal
- 輸入
npm install
(安裝相關套件,只需在首次開啟時執行)
- 輸入
npm run dev
- 開啟瀏覽器 → 輸入網址 http://localhost:5173/
如此開發環境便設定完畢,只要在 VSCode 中修改程式碼,就會看到瀏覽器中的顯示內容也同步刷新。
- HTML:index.html
- CSS:style.css
- JavaScript:main.js
3. 列出功能清單
把想做的 side project 功能列出,以 To Do List 為例:
- 顯示待辦事項
- 新增待辦事項
- 標記為完成
- 標記為未完成
- 排序待辦事項
- 搜尋待辦事項
- 刪除待辦事項
- 還原已刪除待辦事項
- ...
4. 逐一實作
如果已經了解 HTML、CSS、JavaScript 的核心功能:
- HTML:常用的元素(Element)與屬性(Attribute)
- CSS:如何指定元素(Selector)與設定不同樣式
- JavaScript:定義變數與函式、取得與操作 HTML 元素、綁定事件
再搭配文件邊做邊查,應足以實作出基本功能。
如果仍不知道從何下手,或是想做複雜一點的功能卡關了,下一篇文章會介紹幾個解決方法。
文章同步發表於部落格中